<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta id="viewport" name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no"/>
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
            integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"
            integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
            crossorigin="anonymous"></script>
    <style>

        .container {
            text-align: center;
        }

        .container > div {
            margin: 200px auto;
        }

        label {
            text-align: right;
        }
    </style>
</head>

<body>
<div class="container">
    <div>
        <form method="post">
            <div class="form-group row">
                <label for="email" class="col-4 col-form-label">邮&nbsp;&nbsp;&nbsp;&nbsp;箱</label>
                <div class="col-4">
                    <input type="text" class="form-control" id="email" name="email">
                </div>
                <span class="text-danger">*</span>
            </div>
            <div class="form-group row">
                <label for="password" class="col-4 col-form-label">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                <div class="col-4">
                    <input type="password" class="form-control" id="password" name="password">
                </div>
                <span class="text-danger">*</span>
            </div>
            <div class="form-group row">
                <label for="confirmPassword" class="col-4 col-form-label">确认密码</label>
                <div class="col-4">
                    <input type="password" class="form-control" id="confirmPassword" name="confirmPassword">
                </div>
                <span class="text-danger">*</span>
            </div>
            <div class="form-group row">
                <label for="code" class="col-4 col-form-label">验&nbsp;证&nbsp;码</label>
                <div class="col-4">
                    <input type="text" class="form-control" id="code" name="code">
                </div>
                <span class="text-danger">*</span>
                <div class="col-2">
                    <a href="#"><span id="sendCode">获取验证码</span></a>
                </div>
            </div>
            <br>
            <div>
                <button id="register" type="button" class="btn btn-primary btn-submit col-4">注册</button>
            </div>
        </form>
    </div>
</div>
<script>
    /**
     * 获取验证码
     */
    $("#sendCode").click(function () {
        /** 1 发送前检查 */
        // 发送验证码前必须填入邮箱
        var email = $("#email").val();
        if (email === "") {
            alert("请输入邮箱");
            return false;
        }

        /** 2 发送限制 */
        // 每分钟同一个邮箱只允许发送1次
        var sendTime = parseInt(localStorage.getItem(email));
        var now = Date.parse(new Date());
        if (sendTime !== null && sendTime !== "" && sendTime !== "null" && parseInt(sendTime + 60000) >= now) {
            alert("获取验证码过于频繁，请等待1分钟后再试");
            return false;
        }

        /** 3 生成并发送验证码 */
        $.post("http://www.test.com/api/code/create/" + email, function (result) {
            if (result) {
                localStorage.setItem(email, now);
                alert("验证码已发送，请注意查收");
            } else {
                alert("验证码发送失败，请检查邮箱是否正确或未被注册");
            }
        });
    })

    /**
     * 检查邮箱是否已被注册
     */
    $("#email").blur(function () {
        var email = $.trim($("#email").val());
        if (email !== "") {
            $.get("http://www.test.com/api/user/isRegistered/" + email, function (result) {
                if (result) {
                    alert("该邮箱已经注册，请填写其他邮箱");
                }
            });
        }
    })

    /**
     * 注册
     */
    $("#register").click(function () {
        /** 1 输入检查 */
        if (!check()) {
            return false;
        }

        /** 2 注册处理 */
        var email = $("#email").val();
        var password = $("#password").val();
        var code = $("#code").val();

        $.post("http://www.test.com/api/user/register/" + email + "/" + password + "/" + code, function (result) {
            if (result === 0) {
                alert("注册成功");
                $(location).attr('href', 'welcome.html');

            } else if (result === 1) {
                alert("验证码错误");
                return false;

            } else if (result === 2) {
                alert("验证码超时");
                return false;

            } else if (result === 3) {
                alert("该邮箱已被注册");
                return false;

            } else if (result === 4) {
                alert("注册失败，请稍后重试");
                return false;
            }
        });
    })

    /**
     * 注册前输入检查
     */
    function check() {
        var email = $("#email");
        email.val($.trim(email.val()));

        var password = $("#password");
        password.val($.trim(password.val()));

        var confirmPassword = $("#confirmPassword");
        confirmPassword.val($.trim(confirmPassword.val()));

        var code = $("#code");
        code.val($.trim(code.val()));

        // 邮箱
        if (email.val() === "") {
            alert("邮箱不能为空");
            return false;
        }

        if (email.val().length > 64) {
            alert("邮箱必须为64位以内字符");
            return false;
        }

        // 密码
        if (password.val() === "") {
            alert("密码不能为空");
            return false;
        }

        if (password.val().length > 32) {
            alert("密码必须为32位以内字符");
            return false;
        }

        if (confirmPassword.val() === "") {
            alert("确认密码不能为空");
            return false;
        }

        if (password.val() != confirmPassword.val()) {
            alert("两次输入密码不一致，请重新输入");
            return false;
        }

        // 验证码
        if (code.val() === "") {
            alert("验证码不能为空");
            return false;
        }

        return true;
    }
</script>
</body>
</html>